<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="./static/css/global.css">
    <link rel="stylesheet" href="./static/css/index.css">
    <script src="./static/js/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="./static/js/css/layui.css" media="all">
    <script src="./static/js/global/jquery-3.2.1.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="./static/css/swiper.min.css">
    <script src="./static/js/swiper.min.js"></script>
</head>

<body>
    <div class="global-title">
        <div>
            <!-- <span class="title-left">嗨，欢迎来贝链嗨购</span> -->
            <div class="title-left-login">
                <span>嗨，欢迎来贝链嗨购</span>
                <div class="title-left-login-user">
                    <img src="./static/img/img1.png" alt="">
                    <span>这里是用户昵称</span>
                </div>
                <a href="./mine.html">个人中心</a>
                <a href="">收藏夹</a>
                <a href="">退出账户</a>
            </div>
            <div class="title-right">
                <a href="/shopLogin.html">供应商登录</a>
                <a href="./help.html">帮助中心</a>
            </div>
        </div>
    </div>
    <div class="search-header">
        <div>
            <a class="search-header-left" href="">
                <img src="./static/img/header_logo.png" alt="">
            </a>
            <div class="search-header-right">
                <div class="search-header-right-search">
                    <div>
                        <input type="text" placeholder="搜索商品名称">
                        <div>搜索</div>
                    </div>
                    <div>
                        <a href="">三文鱼</a>
                        <a href="">白虾</a>
                        <a href="">帝王蟹</a>
                        <a href="">北极贝</a>
                        <a href="">面包蟹</a>
                    </div>
                </div>
                <a class="search-header-car" href="">
                    <img src="./static/img/car.png" alt="">
                    <span>我的购物车</span>
                </a>
            </div>
        </div>
    </div>
    <div class="classify-title">
        <div class="classify-cont">
            <div class="classify-logo">
                <span>贝链嗨购商品分类</span>
                <img src="./static/img/index_classify_back.png" alt="">
            </div>
            <a href="" class="classify-this">进口海产品</a>
            <a href="./help.html">购物指南</a>
            <a href="./help.html">帮助中心</a>
        </div>
    </div>

    <div class="global-footer">
        <div class="global-footer-header">
            <div>
                <img class="footer1" src="./static/img/footer1.png" alt="">
                <div>
                    <p>供应链直采</p>
                    <p>限定产源 质量保证</p>
                </div>
            </div>
            <div>
                <img class="footer2" src="./static/img/footer2.png" alt="">
                <div>
                    <p>海外全品类</p>
                    <p>实时物流 安全可控</p>
                </div>
            </div>
            <div>
                <img class="footer3" src="./static/img/footer3.png" alt="">
                <div>
                    <p>区块链溯源</p>
                    <p>实时物流 安全可控</p>
                </div>
            </div>
            <div>
                <img class="footer4" src="./static/img/footer4.png" alt="">
                <div>
                    <p>全过程冷链</p>
                    <p>实时物流 安全可控</p>
                </div>
            </div>
        </div>
        <div style="width: 100%;height: 1px;background-color: #ffffff;opacity: 0.38;"></div>
        <div class="global-footer-cont">
            <div>
                <a href="./index.html" class="global-footer-cont-logo">
                    <img src="./static/img/footer_logo.png" alt="">
                </a>
                <a href="" class="global-footer-cont-menu">关于我们</a>
                <a href="" class="global-footer-cont-menu">产品中心</a>
                <a href="" class="global-footer-cont-menu">服务介绍</a>
                <a href="./help.html" class="global-footer-cont-menu">购物指南</a>
                <a href="./help.html" class="global-footer-cont-menu">帮助中心</a>
            </div>
            <div>
                <img src="./static/img/footer_code.png" alt="">
                <p>扫描关注</p>
                <p>贝链嗨购官方微信</p>
            </div>
        </div>
        <div class="global-footer-explain">鲁ICP备 18098987号 copyright @2018 beilianhaigou.com.ALL Rights Reserved.</div>
    </div>
    <div class="global-service">
        <div>
            <a href="">
                <img src="./static/img/service_car.png" alt="">
            </a>
            <a href="">
                <img src="./static/img/service_service.png" alt="">
            </a>
            <a href="">
                <img src="./static/img/service_time.png" alt="">
            </a>
        </div>
        <div class="global-top" style="display:none">
            <img src="./static/img/top.png" alt="">
        </div>
    </div>
    <script>
        //检测屏幕高度
        var height = $(window).height();
        //scroll() 方法为滚动事件
        $(window).scroll(function () {
            if ($(window).scrollTop() > height) {
                $(".global-top").fadeIn(500);
            } else {
                $(".global-top").fadeOut(500);
            }
        });
        $(".global-top ").click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 100);
            return false;
        });
    </script>
    <script>
        var swiper = new Swiper('.swiper-banner', {
            loop: true,
            speed: 300,
            autoplay: {
                delay: 3000
            },
        });
        var swiper = new Swiper('.swiper-recommend', {
            loop: true,
            slidesPerView: 5,
            spaceBetween: 30,
            pagination: {
                clickable: true,
            },
            navigation: {
                nextEl: '.recommend-goods-next',
                prevEl: '.recommend-goods-prev',
            },
        });
    </script>
</body>

</html>